<template>
  <div class="container">
    <page-tools :show-before="true">
      <span slot="before">共{{ total }}条记录</span>
      <template slot="after">
        <el-button size="small" type="warning">导入Excel</el-button>
        <el-button size="small" type="danger">导出Excel</el-button>
        <el-button
          size="small"
          type="primary"
          class="el-icon-plus"
          @click="showDialog = true"
          >新增员工</el-button
        >
      </template>
    </page-tools>

    <!-- 放置表格 -->
    <el-card>
      <el-table border :data="list">
        <el-table-column label="序号" sortable="" type="index" />
        <el-table-column
          label="姓名"
          sortable=""
          align="center"
          prop="username"
        />
        <el-table-column
          label="工号"
          sortable=""
          align="center"
          prop="workNumber"
        />
        <el-table-column
          label="聘用形式"
          sortable=""
          :formatter="formatEmployment"
          align="center"
          prop="formOfEmployment"
        />

        <el-table-column
          label="部门"
          sortable=""
          align="center"
          prop="departmentName"
        />
        <el-table-column
          label="入职时间"
          sortable=""
          align="center"
          prop="timeOfEntry"
        >
          <template slot-scope="obj">
            {{ obj.row.timeOfEntry | formatDate }}
          </template>
        </el-table-column>
        <el-table-column
          label="账户状态"
          sortable=""
          align="center"
          prop="enableState"
        >
          <template slot-scope="{ row }">
            <el-switch :value="row.enableState === 1" />
          </template>
        </el-table-column>
        <el-table-column sortable="" label="操作" style="width: 300px">
          <template slot-scope="{ row }">
            <el-button size="mini" type="text">查看</el-button>
            <el-button size="mini" type="text">转正</el-button>
            <el-button size="mini" type="text">调岗</el-button>
            <el-button size="mini" type="text">离职</el-button>
            <el-button size="mini" type="text">角色</el-button>
            <el-button size="mini" type="text" @click="delEmployees(row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 放置分页 -->
      <el-row type="flex" justify="center" align="middle" style="height: 60px">
        <el-pagination
          layout="prev,pager,next"
          :total="total"
          :page-size="params.size"
          :current-page="params.page"
          @current-change="changePage"
        />
      </el-row>

      <add-employees :show-dialog.sync="showDialog" />
    </el-card>
  </div>
</template>
<script>
import { getEmployeesList, delEmployees } from '@/api/employees'
import EmployeeEnmu from '@/api/constant/employees'
import AddEmployees from './components/AddEmployees'
export default {
  components: { AddEmployees },
  data() {
    return {
      list: [], // 员工列表数据
      params: {
        page: 1,
        size: 10
      },
      total: 0,
      showDialog: false
    }
  },
  created() {
    this.getEmployeesList()
  },
  methods: {
    async getEmployeesList() {
      const { total, rows } = await getEmployeesList(this.params)
      this.total = total
      this.list = rows
    },

    // 换页设置
    changePage(e) {
      this.params.page = e
      this.getEmployeesList()
    },

    // 格式化聘用形式
    formatEmployment(row, column, cellValue, index) {
      const obj = EmployeeEnmu.hireType.find((item) => item.id === cellValue)
      return obj ? obj.value : '未知'
    },

    // 删除员工
    async delEmployees(id) {
      await this.$confirm('您确定要删除该员工么？')
      try {
        await delEmployees(id)
        this.$message.success('您成功的删除了该员工')
        this.getEmployeesList()
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>
